<script lang="tsx">
import { CourseItem, CourseItemDetail, CourseItemType, CourseQuestionSet, CourseVideo } from "@/types/course";
import { PlayCircleOutlined } from "@vicons/material";
import { Icon } from "@vicons/utils";

// 分钟转换成秒
const convertToMinute = (seconds: number) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;

  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
};

const ItemDetailInfo = (props: { type: CourseItem["courseItemType"]; detail: CourseItemDetail }) => {
  if (!props.detail) return null;

  let detail = props.detail;
  switch (props.type) {
    case CourseItemType.VIDEO:
      detail = detail as CourseVideo;
      return (
        <div class="flex items-center gap-1">
          <Icon class="text-lg c-gray-4">
            <PlayCircleOutlined />
          </Icon>
          <span class="text-xs c-gray-4">{convertToMinute(detail.videoDuration)}</span>
        </div>
      );
    case CourseItemType.QUESTION:
      detail = detail as CourseQuestionSet;
      return (
        <div class="text-sm c-gray-4">
          <span>进度: </span>
          <span class="c-gray-6">{detail.actionCount}</span> / <span>{detail.totalCount}</span>
        </div>
      );
    default:
      return null;
  }
};

export default ItemDetailInfo;
</script>
